<template>
	<div class="mine">
		<div id="shortcut_list">
			<div class="side-menu">
				<ul>
					<li id="shortcut_im1"><a href="https://t.me/hk11official" target="_blank" rel="nofollow">
							<img src="../../src/assets/img/telegram.png" alt="">
							<h2>telegram官方頻道</h2>
							<p data-cont="24小時服務不間斷">24小時服務不間斷</p>
						</a></li>
					<li id="shortcut_im2"><a href="https://wa.me/85252058375" target="_blank" rel="nofollow">
							<img src="../../src/assets/img/youxiang.png" alt="">
							<h2>Whatsapp客服</h2>
							<p data-cont=""></p>
						</a></li>
					<li id="shortcut_email"><a href="mailto:hk11office@gmail.com" target="_blank" rel="nofollow">
							<img src="../../src/assets/img/lianxifangshi.png" alt="">
							<h2>電子郵件</h2>
							<p data-cont="建議或投訴">建議或投訴</p>
						</a></li>
					<li id="shortcut_qa"><a href="https://www.hk11.com/info/commonProblem" target="_blank"
							rel="nofollow">
							<img src="../../src/assets/img/yiwen.png" alt="">
							<h2>常见问题</h2>
							<p data-cont="常见问题">常见问题</p>
						</a></li>
					<li id="shortcut_PConlinecs"><a href="https://direct.lc.chat/16586199/" target="_blank"
							rel="nofollow">
							<img src="../../src/assets/img/kefuss.png" alt="" style="height: 25px;">
							<h2>PC在線客戶服務</h2>
							<p data-cont="24小時服務不間斷">24小時服務不間斷</p>
						</a></li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {},
		data() {
			return {}
		},
		created() {},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}
	.side-menu {
	    top: calc(30vw + 140px);
	}
	.side-menu {
	    position: fixed;
	    right: 0;
	    top: 70%;
	    transform: translateY(-50%);
	    width: 60px;
	    z-index: 15;
	}
	ul {
	    list-style: none;
	}
	.side-menu li a {
	    background-color: #5235ff;
	    box-shadow: 0 1px 2px 0 rgba(15, 2, 20, .4);
	    color: #fff;
	    display: flex;
	    flex-direction: column;
	    height: 60px;
	    justify-content: center;
	    margin: 5px 0;
	    overflow: hidden;
	    padding-left: 60px;
	    position: relative;
	    text-decoration: none;
	    transform: translateX(-35px);
	    transition: .3s;
	    width: 270px;
	}
	.side-menu li a:hover {
	    transform: translateX(-210px);
	}
	.side-menu li a h2 {
	    font-size: 16px;
	    font-weight: 400;
		margin: 0;
	}
	.side-menu li a p {
	    color: rgba(255, 255, 255, .5);
	    font-size: 12px;
		margin: 0;
	}
	.side-menu li a img {
	    height: 30px;
	    left: 10px;
	    position: absolute;
	    text-align: center;
	    top: 50%;
		transform: translateY(-50%);
	    width: 30px;
	}
</style>